<template>
  <div>
    <p>
      R({{ r }})
      <input type="range" min="0" max="255" :value="r" @input="changeR" />
    </p>
    <p>
      G({{ g }})
      <input type="range" min="0" max="255" :value="g" @input="changeG" />
    </p>
    <p>
      B({{ b }})
      <input type="range" min="0" max="255" :value="b" @input="changeB" />
    </p>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "",
  computed: {
    ...mapState(["r", "g", "b"]),
  },
  methods: {
    changeR(event) {
      this.$store.dispatch("changeR", event.target.value);
    },
    changeG(event) {
      this.$store.dispatch("changeG", event.target.value);
    },
    changeB(event) {
      this.$store.dispatch("changeB", event.target.value);
    },
  },
};
</script>

<style scoped>
</style>
